<template>
	<view>
		<!-- #ifndef MP -->
		<view class="sys-head" :style="{ height: statusBarHeight }"></view>
		<!-- #endif -->
		<view class="container">
			<view class="login-text">
				<view class="big-text">手机快捷登录</view>
				<view class="small-text">未注册过的手机号将自动创建账号</view>
			</view>
			<view class="list">
				<form>
					<view class="acea-row row-middle row-between item">
						<input type="number" placeholder="请输入手机号码" class="codeIput" v-model="phone"/>
						<button class="get-code-on" :disabled="disabled" :class="disabled === true ? 'get-code' : ''"
							@click="code">
							{{ text }}
						</button>
					</view>
					<view class="acea-row row-middle row-between item">
						<input type="number" placeholder="请输入验证码" class="codeIput" v-model="captcha" />
					</view>
				</form>
			</view>
			<view class="protocol acea-row row-middle">
				<view class="check-box" @click="isAgree=!isAgree">
					<image src="../static/images/agreen_red.png" mode="" v-if="isAgree"></image>
					<image src="../static/images/agreen_gray.png" mode="" v-else></image>
				</view>
				<view class="protocol-text">您已阅读并同意<text>《商和铺隐私条款》</text></view>
			</view>
			
			<view class="login-btn-on" v-if="isAgree">登录</view>
			<view class="login-btn" v-else>登录</view>
			
			<!-- 第三方登录 -->
			<view class="third-login">
				<view class="acea-row row-middle row-between third-login-tit">
					<view class="line-box"></view>
					<view class="tit-text">第三方账号登录</view>
					<view class="line-box"></view>
				</view>
				<view class="acea-row row-middle row-center third-login-btn">
					<view class="icon"> <image src="../static/images/qq_icon.png" mode=""></image> </view>
					<view class="icon"> <image src="../static/images/wechat_icon.png" mode=""></image> </view>
				</view>
			</view>
		</view>
		<view class="uni-p-b-98"></view>
	</view>
</template>

<script>
		var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	import {
		Debounce
	} from '@/utils/validate.js'
	export default {
		mixins: [sendVerifyCode],
		data() {
			return {
				statusBarHeight: statusBarHeight,
				phone:'',
				captcha:'',
				isAgree:false
			};
		},
		methods:{
			code: Debounce(function() {
				let that = this;
				if (!that.phone) return that.$util.Tips({
					title: '请填写手机号码'
				});
				if (!this.isAgree) return this.$util.Tips({
					title: `message.login.agreement`
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				that.$refs.verify.show();
			}),
		}
	}
</script>

<style lang="scss">
.container{
	padding: 32rpx;
}
.login-text{
	padding: 120rpx 0;
	.big-text{
		font-size: 64rpx;
		font-weight: 400;
		line-height: 76rpx;
		color: rgba(0, 0, 0, 1);
	}
	.small-text{
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0.64rpx;
		line-height: 54rpx;
		color: rgba(147, 147, 147, 1);
	}
}
.list{
	.item{
		width: 100%;
		height: 100rpx;
		border-radius: 10rpx;
		background: rgba(247, 248, 249, 1);
		overflow: hidden;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
		.codeIput{
			width: 70%;
			vertical-align: middle;
			font-size: 32rpx;
			color: rgba(0, 0, 0, 1);
		}
	}
	.get-code-on{
		width: 30%;
		vertical-align: middle;
		font-size: 28rpx;
		color: rgba(166, 166, 166, 1);
	}
	.get-code-on.get-code{
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}
}

.protocol{
	padding: 40rpx 0;
	.check-box{
		width: 32rpx;
		height: 32rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.protocol-text{
		margin-left: 22rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		text{
			color: rgba(235, 70, 81, 0.93);
		}
	}
}
.login-btn-on{
	width: 98%;
	height: 108rpx;
	line-height: 108rpx;
	opacity: 1;
	background: rgba(238, 33, 45, 1);
	font-size: 36rpx;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	text-align: center;
	border-radius: 10rpx;
}
.login-btn{
	width: 98%;
	height: 108rpx;
	line-height: 108rpx;
	opacity: 1;
	background: rgba(252, 139, 139, 1);
	font-size: 36rpx;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	text-align: center;
	border-radius: 10rpx;
	
}
.third-login{
	margin-top: 164rpx;
	.third-login-tit{
		padding: 0 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(51, 62, 99, 1);
		.line-box{
			width: 152rpx;
			height: 1rpx;
			border-bottom: 1px solid rgba(213, 221, 224, 1);  
		}
	}
	.third-login-btn{
		margin-top: 164rpx;
		.icon{
			width: 96rpx;
			height: 96rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.icon~.icon{
			margin-left: 72rpx;
		}
	}
}
</style>
<style>
	page{
		background: #ffffff!important;
	}
</style>
